<template>
<view>
	<view class="classify">
		<!-- 搜索框 -->
		<view class="search-container">
			<view class="search">
				<uni-search-bar placeholder="请输入搜索内容" bgColor="#EEEEEE"  @focus="gotoSearch" cancelButton="none"/>
			</view>
		</view>
	</view>
<!-- 分类部分 -->
		<view class="cate-container">
			<view class="cate-left">
				 <view :class="['cate-item',activeIndex==index?'active':'']" v-for="(item,index) in cateList" :key="index" @click="changeActive(index)">{{item.classifyName}}</view>
			</view>
			<view class="cate-right">
				<view class="cate-content" v-for="(goodItem,goodIndex) in goodList" :key="goodIndex" @tap="gotoTypeDetali(goodItem.text)">
					<image :src="goodItem.picUrl" mode="" style="border-radius:5px"></image>
					<view class="cate-text">{{goodItem.text}}</view>
				</view>
			</view>
		</view>
</view>	
</template>

<script>
	import { store } from '@/uni_modules/uni-id-pages/common/store.js'
		import { get, post, removeToken } from '@/utils/api.js';
	import { UniSearchBar } from '@dcloudio/uni-ui';
	export default {
		components:{
			UniSearchBar
		},
		data() {
			return {
				goodList:[],
// 初始化的分类列表及每个分类下的模拟商品信息
			cateList: [
				{
					classifyId: 1,
					classifyName: '宠物',
					children: [

					]
				},
				{
					classifyId: 2,
					classifyName: '宠物周边',
					children: [

					]
				}
			],
				// 当前点击项的索引号
				activeIndex:0
			};
		},
		methods:{
    getProductList() {
        post('/product/displayProductList',{}, {
            needToken: true,
            success: (res) => {
                if (res.statusCode === 200) {
                    this.updateCateListWithProducts(res.data);
                }
            }
        });
    },
		updateCateListWithProducts(products) {
			products.forEach(product => {
				const { productType1, productId, productImgUrl, productType2 } = product;

				// 查找对应的分类节点
				const classifyNode = this.cateList.find(c => c.classifyName === productType1);

				// 如果分类存在，并且children数组中没有相同productType2的产品，则添加产品信息
				if (classifyNode) {
					const existingProduct = classifyNode.children.find(child => child.text === productType2);
					if (!existingProduct) {
						classifyNode.children.push({
							goodId: productId,
							text: productType2,
							picUrl: productImgUrl
						});
					}
				}
			});
		},
			//更改点击项的索引号
			changeActive(i){
				this.activeIndex=i
				// 更新当前选中分类的商品列表
				this.goodList = this.cateList[i].children;
			},
			gotoTypeDetali(text){
				if(text.includes('周边'))
				{
					uni.setStorageSync('petAccessories', text);
					uni.navigateTo({
						url:'/pages/petAccessories/petAccessories'
					})
				}
				else{
					uni.setStorageSync('petType', text);
					uni.navigateTo({
						url:'/pages/pet/pet'
					})	
				}

			},
			gotoSearch() {
				uni.navigateTo({
					url:'/pages/search/search'
				})
			}
		},
		created() {
			this.getProductList()
		},
		onLoad() {
			// this.getcateList()
			// 初始化时默认显示第一个分类的商品列表
			this.goodList = this.cateList[0].children
					// this.getcateList();
		},
		onShow(){
			//根据点击不同分类默认选中对应标签
		  if(uni.getStorageSync('categoryName') === '宠物')
		  {
			  this.activeIndex = 0
			  this.changeActive(0)
		  }
		  else  if(uni.getStorageSync('categoryName') === '宠物周边')
		  {
			  this.activeIndex = 1
			  this.changeActive(1)
		  }
		  else{
			  this.activeIndex = 0
		  }
		  //移除本地分类存储，避免直接点击tabbar时由于之前的缓存选中标签出错
		  uni.removeStorageSync('categoryName')
		}
	}
</script>

<style lang="scss">
.classify {
  display: flex;
  flex-direction: column; /* 使内容垂直排列 */
}

.search-container {
  width: 90%; /* 调整搜索框宽度，留出两边间隙 */
  margin: 0 auto; /* 水平居中 */
  margin-top: 10px; /* 根据需要调整与顶部的距离 */
}

.search {
  /* 如果需要调整搜索框本身的样式，请在这里添加 */
}


	.cate-container{
		width: 100%;
		display: flex;
		.cate-left{
			width: 200rpx;
			background-color: #F6F6F6;
			.cate-item{
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				padding-left: 40rpx;
				box-sizing: border-box;
			}
			.active{
				background-color: #FFFFFF;
				position: relative;
				padding-left: 40rpx;
				box-sizing: border-box;
				&::before{
					content: '';
					display:block;
					width: 10rpx;
					border-radius: 6rpx;
					height: 40rpx;
					background-color: #FC4353;
					position: absolute;
					left: 0rpx;
					top: 30rpx;
				}
			}
		}
		.cate-right{
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			height: 300rpx;
			.cate-content{
				width: 33%;
				height: 200rpx;
				text-align: center;
				image{
					width: 100rpx;
					height: 100rpx;
				}
				.cate-text{
					font-size: 34rpx;
				}
			}
		}
	}


</style>
